<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="handleSearch()"
            >查询</el-button
          ></el-col
        >
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      style="margin-top: 1%"
    >
      <el-table-column align="center" label="ID" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.companyName }}
        </template>
      </el-table-column>
      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.companyCode }}
        </template>
      </el-table-column>
      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.city }}
        </template>
      </el-table-column>

      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.county }}
        </template>
      </el-table-column>

      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <el-table-column label="用户名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.personName }}
        </template>
      </el-table-column>

      <el-table-column label="审核状态" width="100" align="center">
        <template slot-scope="scope">
          <!-- 审核状态(支付渠道为对公则有该字段)  1 审核中   2 审核完成  3 审核拒绝 -->
          <span
            v-if="scope.row.review == 1"
            style="color: rgb(64, 158, 255)"
            >审核中</span
          >
          <span
            v-if="scope.row.review == 2"
            style="color: rgb(103, 194, 58)"
            >通过</span
          >
          <span
            v-if="scope.row.review == 3"
            style="color: rgb(245, 108, 108)"
            >驳回</span
          >
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.creationTime | formatYmdHms }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleDetails(scope.row.id)"
            >详情</el-button
          >
          <el-popconfirm
            title="是否审核通过？"
            size="mini"
            confirm-button-text="是"
            cancel-button-text="驳回"
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleConfirm(scope.row.id)"
            @cancel="handleCancel(scope.row.id)"
          >
            <el-button slot="reference" size="mini">审核</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.pageIndex"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="where.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getCompanyList, findApprovedById } from "@/api/company";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: [],
      listLoading: true,
      where: {
        pageIndex: 1,
        pageSize: 10,
        refundType: "",
      },
      total: 0,
      form: {},
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getCompanyList(obj)
        .then((response) => {
          console.log(response);
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
          this.currentPage4 = response.data.currentPage;
          this.pageSize = response.data.pageSize;
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    handleSizeChange(val) {
      this.where.pageSize = val;
      this.fetchData(this.where);
    },
    handleCurrentChange(val) {
      this.where.pageIndex = val;
      this.fetchData(this.where);
    },
    handleDetails(id) {
      window.open(
        this.$router.resolve({
          path: "/customer/Companydetails",
          query: { id: id },
        }).href,
        "_blank"
      );
    },
    handleAudit(id) {
      this.listLoading = true;
      findApprovedById(id)
        .then((response) => {
          console.log(response);
          this.listLoading = false;
          this.fetchData(this.where);
        })
        .catch((error) => {
          console.log(error);
          this.listLoading = false;
        });
    },
    handleConfirm(id) {
      this.isLoading = true; // 开始加载
      // 调用接口
      findApprovedById(id, 2)
        .then((res) => {
          this.$message.success(res.message);
          this.fetchData(this.where);
        })
        .catch((err) => {
          this.$message.success(err.message);
        })
        .finally(() => {
          this.isLoading = false; // 结束加载
        });
    },
    handleCancel(id) {
      this.isLoading = true; // 开始加载
      // 调用接口
      findApprovedById(id, 3)
        .then((res) => {
          this.$message.success(res.message);
          this.fetchData(this.where);
        })
        .catch((err) => {
          this.$message.success(err.message);
        })
        .finally(() => {
          this.isLoading = false; // 结束加载
        });
    },
    handleSearch() {
      this.fetchData(this.where);
    },
  },
};
</script>